<style include="cr-shared-style diagnostics-shared">
  :host-context(body.jelly-enabled) #banner {
    background-color: var(--cros-sys-primary_container);
  }

  #banner {
    align-items: center;
    background-color: var(--cros-highlight-color);
    display: flex;
    height: 56px;
    position: sticky;
    top: 0;
    width: 100vw;
    z-index: 1;
  }

  #bannerIcon {
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    fill: var(--cros-color-prominent);
    padding-inline-end: 16px;
    padding-inline-start: 40px;
  }

  .elevation-2 {
    box-shadow: var(--diagnostics-box-shadow-elevation-2);
  }
</style>
<div id="banner" hidden$="[[!bannerMessage]]" class$="[[scrollingClass]]">
  <iron-icon icon="diagnostics:info" id="bannerIcon"></iron-icon>
  <span id="bannerMsg" class="diagnostics-caution-banner-font">[[bannerMessage]]</span>
</div>
